<template>
	<div class="container">
		<!-- 左边导航栏 -->
		<div class="left-sidebar">
			<div 
				v-for="(item,index) in leftlist" 
				:key="index" 
				class="nav-item"
				:class="{ 'active': activeIndex === index }"
				@click="activeIndex = index"
				@mouseenter="hoverIndex = index"
				@mouseleave="hoverIndex = null"
			>
				<div class="nav-text">{{item}}</div>
				<div class="nav-indicator" :class="{ 'hover': hoverIndex === index }"></div>
			</div>
		</div>
		<!-- 录播图 -->
		<div class="content-area">
			    <el-carousel trigger="click" height="350px">
			      <el-carousel-item v-for="(item,index) in rightimg" :key="index">
			        <img :src="item.imgs" alt="" />
			      </el-carousel-item>
			    </el-carousel>
		</div>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				leftlist:["上衣", "裤子", "鞋子", "配饰","电器","电脑", "促销专区"],
				rightimg:[{imgs:require('../assets/img/sideshow/1.jpg')},
				{imgs:require('../assets/img/sideshow/2.jpg')},
				{imgs:require('../assets/img/sideshow/3.jpg')},
				{imgs:require('../assets/img/sideshow/4.jpg')},
				{imgs:require('../assets/img/sideshow/5.jpg')}],
				activeIndex: 0,
				hoverIndex: null
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		/* min-height: 100vh; */
	}
	
	.left-sidebar {
		width: 250px;
		background-color: #f8f9fa;
		margin: 20px 0;
		box-shadow: 2px 0 5px rgba(0,0,0,0.1);
		height: 350px;
	}
	
	.nav-item {
		position: relative;
		padding: 12px 20px;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.nav-item:hover {
		background-color: #e9ecef;
	}
	
	.nav-item.active {
		background-color: #e9ecef;
		font-weight: bold;
		color: #007bff;
	}
	
	.nav-item.active .nav-indicator {
		width: 4px;
		opacity: 1;
		background-color: #007bff;
	}
	
	.nav-indicator {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0;
		background-color: #adb5bd;
		opacity: 0;
		transition: all 0.3s ease;
	}
	
	.nav-indicator.hover {
		width: 2px;
		opacity: 1;
	}
	
	.nav-text {
		position: relative;
		z-index: 1;
	}
	
	.content-area {
		flex: 1;
		
		padding: 20px 0;
	}
	.content-area img{
		height: 350px;
		width: 100%;
		object-fit: cover;
	}
</style>